import React from "react";
import { CommentList } from './components/CommentList.js'
import { Tabs } from './components/Tabs.js'
import { Form } from './components/Form.js'
import { CommentNumber } from './components/CommentNumber.js'
import './Bilibili.css'
import { request } from './utils/index'
export class Bili extends React.Component {
  state = {
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'hot',
    list: [
      {
        id: 4,
        author: '五月天4',
        comment: '不打扰，是我的温柔4',
        time: new Date('2021-10-11 11:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
      },
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: new Date('2021-10-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '哎哟，不错哦',
        time: new Date('2021-10-11 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
      },
      {
        id: 3,
        author: '五月天',
        comment: '不打扰，是我的温柔',
        time: new Date('2021-11-11 11:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
      },
    ],
  }
  // 点击切换排序栏
  changeTab = (active) => {
    this.setState({
      active: active
    })
    if (active === 'hot') {
      // 时间升序
      this.setState({
        active,
        list: [
          ...this.state.list.sort(
            (a, b) => a.time.getTime() - b.time.getTime()
          ),
        ],
      });
    } else {
      // 时间降序
      this.setState({
        active,
        list: [
          ...this.state.list.sort(
            (a, b) => b.time.getTime() - a.time.getTime()
          ),
        ],
      });
    }
  }
  // 删除评论
  delComment = async (id) => {
    await request.delete(`/list/${id}`)
    const newList = this.state.list.filter((item) => item.id !== id); // 不等于的留下
    this.setState({
      list: newList,
    });
  };
  // 点赞或踩
  changeAttitude = async (id, attitude) => {
    const res = await request.patch(`/list/${id}`, { attitude });
    console.log('attitude', res);
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        return { ...item, attitude };
      }
      return item;
    });



    this.setState({
      list: newList,
    });
  };
  addComment = async (txt) => {
    const res = await request.post('/list', {
      author: '作者',
      comment: txt,
      time: new Date(),
      attitude: 0,
    });
    console.log('post res', res);

    const newList = [res.data, ...this.state.list];

    this.setState({
      list: newList,
    });
  };
  async componentDidMount() {
    const tabs = await request.get('/tabs');
    const list = await request.get('/list');

    // const newList = JSON.parse(localStorage.getItem('list') || '[]')
    this.setState({
      tabs: tabs.data,
      list: list.data
    })
  }
  render() {
    return (
      <div className="comment-root">
        <div className="comment-container">
          <CommentNumber number={this.state.list.length} />
          <Tabs
            tabs={this.state.tabs}
            active={this.state.active}
            changeTab={this.changeTab}
          />
          <Form addComment={this.addComment} />
          <CommentList list={this.state.list} delComment={this.delComment} changeAttitude={this.changeAttitude} />
        </div>
      </div>
    )
  }
  componentDidUpdate() {
    localStorage.setItem('list', JSON.stringify(this.state.list))
  }
}